<template>
	<view class="login-content">
		<Ywatermark :info="'这里是水印内容'"></Ywatermark>
		<view class="content">
			<view class="title">
				欢迎登录美团
			</view>
			<view class="phone">
				<view class="phone-left">
					+86 <u-icon class="icon" name="arrow-right" size="12"></u-icon>
				</view>
				<u-input ref="input" v-model="phone" readonly type="number" border="none" maxlength="11" placeholder="请输入手机号"
					@focus="focus" @change="change" :disabledKeyboard="true" />
			</view>
			<view class="tips">
				未注册的手机号验证后自动创建美团用户
			</view>
			<view class="check" :class="move? 'move':''">
				<u-checkbox-group v-model="checked">
					<u-checkbox name="checked" size="12"></u-checkbox>
				</u-checkbox-group>
				<view class="check-text">
					我已阅读并同意<span>《美团用户协议》</span>、<span>《隐私政策》</span>，并授权美团使用该美团账号信息（如昵称、头像、收货地址）进行统一管理。
				</view>
			</view>
			<u-button class="btn" type="warning" :disabled="disabled" text="获取短信验证码" @click="getCode"></u-button>
		</view>
		<u-keyboard ref="uKeyboard" mode="number" :dotDisabled="true" :showTips="false" :showCancel="false"
			:overlay="false" :show="uKeyboardShow" @change="valChange" @backspace="backspace" @confirm="uKeyboardSure">
		</u-keyboard>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import Ywatermark from '../../components/Ywatermark.vue'
	export default {
		components: {
			Ywatermark
		},
		data() {
			return {
				phone: '12345678901', //手机号
				move: false, // 动画
				checked: [], // 多选框
				uKeyboardShow: false, // 键盘显隐
				disabled: false, // 按钮禁用
			}
		},
		mounted() {},
		watch: {
			checked(newV, oldV) {
				if (newV) {
					this.uKeyboardShow = false
				}

			}
		},
		methods: {
			// 输入框获得焦点
			focus() {
				uni.hideKeyboard();
				this.uKeyboardShow = true
			},

			// 输入框值改变
			change(e) {
				if (e && e.length === 11) this.disabled = false
			},

			// 将每次按键的值拼接到value变量中，注意+=写法
			valChange(val) {
				this.phone += val;
			},

			// 退格键被点击 // 删除value的最后一个字符
			backspace() {
				if (this.phone.length) this.phone = this.phone.substr(0, this.phone.length - 1);
			},

			//键盘 确认 
			uKeyboardSure() {
				this.uKeyboardShow = false
			},

			// 按钮
			getCode() {
				const that = this
				this.uKeyboardShow = false
				// 手机号校验不通过
				if (!uni.$u.test.mobile(this.phone)) {
					this.$refs.uToast.show({
						type: 'warning',
						message: "手机号不正确",
					})
					return
				}

				// 选择未选中
				if (this.checked.length === 0) {
					this.move = true
					setTimeout(() => {
						that.move = false
					}, 2000)
					return
				}

				this.$refs.uToast.show({
					message: "验证码已发送，请查收",
				})
				this.disabled = true
				setTimeout(() => {
					this.disabled = false
					uni.navigateTo({
						url: `../check-code/check-code?phone=${this.phone}`
					})
				}, 1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login-content {
		width: 100vw;
		height: 100vh;

		.content {
			width: 86%;
			height: 100%;
			margin: 0rpx auto;

			.title {
				font-family: "Times New Roman", Georgia, Serif;
				padding-top: 60px;
				font-size: 38rpx;
				letter-spacing: 4rpx;
				font-weight: 400;
			}

			.phone {
				display: flex;
				margin-top: 80rpx;
				border-bottom: 1rpx solid #bfbebe;
				padding-bottom: 20rpx;

				.phone-left {
					display: flex;
					align-items: center;
					font-size: x-small;

					.icon {
						margin: 0rpx 10rpx;
					}
				}
			}

			.tips {
				margin-top: 10rpx;
				font-size: x-small;
				color: #bbb;
			}

			.check {
				display: flex;
				align-items: first baseline;
				margin-top: 60rpx;
				font-size: xx-small;

				.check-text {
					margin-left: 6rpx;
					color: #a2a2a2;

					span {
						color: #007AFF;
					}
				}
			}

			.move {
				-webkit-animation: anima_wobble 2s 1;
			}

			@-webkit-keyframes anima_wobble {
				7.5% {
					-webkit-transform: translateX(-1%) rotate(-1deg);
				}

				15% {
					-webkit-transform: translateX(0%) rotate(1deg);
				}

				22.5% {
					-webkit-transform: translateX(-1%) rotate(-1deg);
				}

				30% {
					-webkit-transform: translateX(0%) rotate(0deg);
				}

				37.5% {
					-webkit-transform: translateX(-1%) rotate(-1deg);
				}

				50% {
					-webkit-transform: translateX(0) rotate(0deg)
				}
			}

			.btn {
				margin-top: 100rpx;
			}
		}
	}
</style>
